<template>
  <div class="line">
    <div class="line-level">
      <p class="line-level__name text-main-color" v-for="(item, index) in progressData.levels" :key="index">
        {{ item.name }}
      </p>
    </div>
    <div class="line-progress">
      <div class="line__line"></div>
      <div class="line__line-active" :style="{ width: minLevelProcess(progressData.displayProgress) + '%', background: computedProgressColor }"></div>
      <div class="line-scale">
        <i></i>
        <i class="line-scale__point" v-for="(item, index) in progressData.boundaries" :key="index"> </i>
        <i></i>
      </div>
    </div>
    <div class="line-value text-main-color">
      <p>&nbsp;</p>
      <p v-for="(item, index) in progressData.boundaries" :key="index">{{ item }}</p>
      <p>&nbsp;</p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import service from './service';

@Component({})
export default class extends Mixins(service) {}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
.line {
  background: rgba(246, 247, 248, 1);
  position: relative;
  margin-bottom: rem(34);
}
.line-level {
  display: flex;
}
.line-level__name {
  flex: 1;
  font-size: 10px;
  line-height: rem(28);
  text-align: center;
}
.line-progress {
  margin-top: 5px;
  position: relative;
}
.line__line {
  width: 100%;
  height: rem(8);
  border-radius: rem(4);
  background: rgba(0, 0, 0, 0.1);
}
.line__line-active {
  height: rem(8);
  border-radius: rem(4);
  position: absolute;
  top: 0;
  z-index: 10;
}
.line-scale {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 11;
  display: flex;
  justify-content: space-between;
  .line-scale__point {
    width: rem(4);
    height: rem(8);
    background: rgba(0, 0, 0, 0.2);
  }
}
.line-value {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  p {
    flex: 1;
  }
  p:first-child,
  p:last-child {
    flex: 0.5;
  }
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}
</style>
